<template>
  <div style="margin-left: 50px;margin-top: 50px">
    <el-descriptions column="1" direction="vertical">
      <el-descriptions-item label="姓名">{{ tableData.name }}</el-descriptions-item>
      <el-descriptions-item label="学号">{{ tableData.studentNumber }}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{ tableData.phoneNumber }}
        <el-button size="small" type="text" @click="updatePhoneNo">修改</el-button>
      </el-descriptions-item>

      <el-descriptions-item v-if="changePhoneNo" label="新手机号">
        <el-form :model="changePhoneForm" :rules="rules" ref="changePhoneForm">
          <el-form-item prop="newPhoneNo">
        <el-input v-model="newPhoneNo" clearable style="width: 20%"></el-input>
        <el-button size="small" type="text" @click="confirmPhoneChange">确定</el-button>
        <el-button size="small" type="text" @click="cancelPhoneChange">取消</el-button>
          </el-form-item>
        </el-form>
      </el-descriptions-item>
      <el-descriptions-item label="邮箱">{{ tableData.email }}
        <el-button size="small" type="text" @click="updateEmail">修改</el-button>
      </el-descriptions-item>

      <el-descriptions-item v-if="changeEmail" label="新邮箱">
        <el-form :model="changeEmailForm" :rules="rules" ref="changeEmailForm">
          <el-form-item prop="newEmail">
            <el-input v-model="newEmail" clearable style="width: 20%"></el-input>
            <el-button size="small" type="text" @click="confirmEmailChange">确定</el-button>
            <el-button size="small" type="text" @click="cancelEmailChange">取消</el-button>
          </el-form-item>
        </el-form>
      </el-descriptions-item>
      <el-descriptions-item label="身份">{{ tableData.type }}</el-descriptions-item>
      <el-descriptions-item label="学院">{{ tableData.school }}</el-descriptions-item>
      <el-descriptions-item label="专业">{{ tableData.major }}</el-descriptions-item>
      <el-descriptions-item>
        <el-button size="small" style="color: #cccccc" @click="$router.push('/resetPassword')">
          修改密码
        </el-button>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "StuInfo",
  components: {},
  data() {
    return {
      //rule
      rules: {
        newEmail: [
          {required: true, message: '请输入新邮箱', trigger: 'blur'},
          {type: 'email', message: '请输入正确格式', trigger: 'blur'}
        ],
        newPhoneNo: [
          {required: true, message: '请输入手机号',trigger: 'blur'},
          {
            validator: (rule, value, cb) => {
              if (/^1[3-9]\d{9}$/.test(value)) {
                cb()
              } else {
                cb(new Error('手机号格式错误'))
              }
            }
          }
        ],
      },

      tableData: {},
      //PhoneNo
      changePhoneNo: false,
      newPhoneNo: null,
      changePhoneForm: {},
      //Email
      changeEmail: false,
      newEmail: null,
      changeEmailForm: {}
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      request.get("http://124.70.179.188:8082/stu/getByName?name=" + localStorage.getItem("userid")).then(res => {
        this.tableData = res.data

      })
    },
    //更新手机号
    updatePhoneNo() {
      this.changePhoneNo = true
    },
    confirmPhoneChange() {
      this.$refs["changePhoneForm"].validate((valid) => {
        if(!valid){
          return false
        }
        else {
          request.put("http://124.70.179.188:8082/changePhoneNoUrl", this.newPhoneNo).then(res => {
            //判断是否修改成功
            if (res.code === '0') {
              this.$message({
                type: "success",
                message: "修改成功"
              })
            } else {
              this.$message({
                type: "error",
                message: res.message
              })
            }
            this.load()
            this.cancelPhoneChange()
          })
        }
      })
    },
    cancelPhoneChange() {
      this.newPhoneNo = null
      this.changePhoneNo = false
    },
    //更新邮箱
    updateEmail() {
      this.changeEmail = true
    },
    confirmEmailChange() {
      this.$refs["changeEmailForm"].validate((valid) => {
        if(!valid){
          return false
        }
        else {
          request.put("http://124.70.179.188:8082/changeEmailUrl", this.newEmail).then(res => {
            //判断是否修改成功
            if (res.code === '0') {
              this.$message({
                type: "success",
                message: "修改成功"
              })
            } else {
              this.$message({
                type: "error",
                message: res.message
              })
            }
            this.load()
            this.cancelEmailChange()
          })
        }
      })

    },
    cancelEmailChange() {
      this.newEmail = null
      this.changeEmail = false
    },
  }
}
</script>

<style scoped>

</style>